<template>
  <!-- CancelAfterVerification 核销 -->
  <PageContainer>
    <view class="container">
      <Header title="核销" />
      <view class="introduce">
        <image class="introduce-icon" src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/icon/icon-1.png" />
        <text class="introduce-title">核销</text>
        <text class="introduce-des">支持“扫描二维码”或“查询手机号” 核销福利券</text>
      </view>
      <view class="function-item">
        <view class="function-item__label">
          <image class="label-icon" src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/icon/scan-icon.png" />
          <text>扫描二维码</text>
        </view>
        <button type="none" class="function-item__button" @click="scanCode">扫一扫</button>
      </view>
      <view class="function-item">
        <view class="function-item__label">
          <image class="label-icon" src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/icon/mobile-phone-icon.png" />
          <input v-model.number="phoneInput" type="number" placeholder="请输入手机号码" />
        </view>
        <button type="none" class="function-item__button" @click="queryPhone">查询</button>
      </view>
    </view>
  </PageContainer>
</template>

<script lang="ts" setup>
  /**  CancelAfterVerification  核销 */
  import PageContainer from '@/components/PageContainer/index.vue';
  import Header from '@/components/Header/index.vue';
  import { navigateTo } from '@/router';
  import { Toast } from '@/utils';
  import { phoneReg } from '@/utils/Reg';
  import { ref } from 'vue';

  const phoneInput = ref<number>();

  function queryPhone() {
    if (!phoneInput.value) {
      return Toast('请输入手机号码', 'none', 1500, false);
    }
    if (!phoneReg.test(phoneInput.value.toString()))
      return Toast('请输入正确的手机号码', 'none', 1500, false);
    navigateTo({
      name: 'cancelAfterVerificationList',
      options: {
        phone: phoneInput.value,
      },
    });
  }

  function scanCode() {
    uni.scanCode({
      onlyFromCamera: true,
      scanType: ['qrCode'],
      success: ({ result }) => {
        navigateTo({
          name: 'cancelAfterVerificationList',
          options: {
            verificationCode: result,
          },
        });
      },
    });
  }
</script>

<style lang="scss" scoped>
  .container {
    min-height: 100vh;
    background-color: #fff;
    padding: 0 30rpx;
  }
  .introduce {
    padding: 0 100rpx;
    text-align: center;
    padding-top: 46rpx;
    color: #333;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-bottom: 70rpx;
    border-bottom: 1px solid #dddddd;
    &-icon {
      width: 128rpx;
      height: 128rpx;
    }
    &-title {
      font-size: 38rpx;
      font-weight: bolder;
      padding: 20rpx 0;
    }
    &-des {
      font-size: 28rpx;
    }
  }

  .function-item {
    color: #333;
    font-size: 28rpx;
    height: 100rpx;
    border-bottom: 1px solid #dddddd;
    display: flex;
    align-items: center;
    justify-content: space-between;
    &__label {
      display: flex;
      align-items: center;
      .label-icon {
        width: 48rpx;
        height: 48rpx;
        margin-right: 24rpx;
      }
    }
    &__button {
      width: 138rpx;
      height: 60rpx;
      background: #e9e3b5;
      border-radius: 10rpx;
      line-height: 60rpx;
      text-align: center;
      font-size: 28rpx;
    }
  }
</style>
